<template>
	<view class="fullPage">
		<map
			id="map"
			:scale="scale"
			:latitude="latitude"
			:longitude="longitude"
			:markers="list"
			:show-location="false"
			@regionchange="dragMap"
			@markertap="markertap"
			@click="mapTap"
			style="width: 100vw;height: 100vh"
		>
			<!-- tab栏切换 -->
			<cover-view class="tab_w">
				<cover-view class="h60 ft30">我的电池</cover-view>
				<cover-view class="h50">电池ID：{{ info.batteryNo || '--' }}</cover-view>
				<cover-view class="h50">总电压：{{ info.typeVt || '--' }}V</cover-view>
				<cover-view class="h50">总电流：{{ info.current / 100 || 0 }}A</cover-view>
				<!-- 0: 放电状态1: 充电状态2: 负载在位状态3: 充电在位状态 4:空载状态 -->
				<cover-view class="flex h50">
					电池状态：
					<cover-view class="primary">
						{{
							info.btStatus == 0
								? '放电状态'
								: info.btStatus == 1
								? '充电状态'
								: info.btStatus == 2
								? '负载在位状态'
								: info.btStatus == 3
								? '充电在位状态'
								: info.btStatus == 4
								? '空载状态'
								: '--'
						}}
					</cover-view>
				</cover-view>
				<cover-view class="h50">电池温度：{{ info.temperature || '--' }}°C</cover-view>
				<cover-view class="h50">电池电量百分比：{{ info.electric || '--' }}%</cover-view>
				<cover-view class="h50">剩余容量：{{ info.ahRemain / 100 || 0 }}AH</cover-view>
			</cover-view>

			<cover-view class="footer_w">
				<cover-view class="footer_btn" @click="routerLink({ path: '/pages/user/myOrder/index', query: { activeTab: 3 } })">查看电池订单</cover-view>
			</cover-view>
		</map>
	</view>
</template>

<script>
import { getMyBattery } from '@/api/user.js'
export default {
	data() {
		return {
			mapContext: null,
			scale: 14, // 地图缩放比例
			latitude: 23.02067,
			longitude: 113.75179,
			list: [], // 设备列表
			info: {}
		}
	},
	onLoad() {
		this.mapContext = uni.createMapContext('map')
		this.getMyBattery()
	},
	methods: {
		async getMyBattery() {
			const res = await getMyBattery()
			if (res.code == 200) {
				const info = res.data
				this.info = info

				this.mapContext.moveToLocation({
					longitude: info.lng,
					latitude: info.lat
				})
				this.list[0] = {
					id: -1,
					latitude: info.lat * 1,
					longitude: info.lng * 1,
					width: 70,
					height: 70,
					iconPath: '/static/ic_sbdw_2x.png',
					anchor: {
						x: 0.5,
						y: 0.5
					}
				}
			} else if (res.code == 1010) {
				this.confirm({
					content: res.msg,
					showCancel: false
				}).then(res => {
					this.back()
				})
			} else {
				this.toast(res.msg)
			}
		},
		dragMap(e) {
			// 注意：支付宝小程序 如果缩小或者放大了地图比例尺以后，请在 onRegionChange 函数中重新设置 data 的
			// scale 值，否则会出现拖动地图区域后，重新加载导致地图比例尺又变回缩放前的大小。
			// #ifdef MP-ALIPAY
			console.log(e)
			console.log(e.scale)
			this.scale = e.scale

			this.mapContext.getCenterLocation({
				success: res => {
					console.log(res.longitude)
					console.log(res.latitude)

					this.latitude = res.latitude
					this.longitude = res.longitude
				},
				fail: err => {
					console.log(err)
				}
			})
			// #endif
			console.log('地图被拖动')
			this.markerInfoShow = false
		},
		mapTap() {
			console.log('地图被点击')
			// this.markerInfoShow = false
		},
		markertap(e) {
			/* console.log(e)
			console.log(this.list)
			if (e.detail.markerId < 0) {
				return false
			} */
		}
	}
}
</script>

<style lang="scss" scoped>
.tab_w {
	position: fixed;
	top: 30upx;
	left: 26upx;
	width: 698upx;

	padding: 30upx 24upx;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 50upx;
	overflow: hidden;
	box-shadow: 0px 4px 18px 0px rgba(50, 130, 255, 0.24);
}

.footer_w {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 750upx;
	box-sizing: border-box;
	padding: 40px 30px;
	background-color: #fff;
	.footer_btn {
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		background-color: $primary;
		border-radius: 90upx;
		color: #fff;
		font-size: 32upx;
	}
}
</style>
